<template>
  <view class="complaint-detail-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="进度查询" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 进度跟踪器 -->
      <view class="progress-tracker">
        <view 
          class="progress-step" 
          v-for="(step, index) in progressSteps" 
          :key="index"
          :class="{ active: step.active, completed: step.completed }"
        >
          <view class="step-icon-wrapper">
            <image 
              class="step-icon" 
              :src="step.completed || step.active ? step.iconActive : step.icon" 
              mode="aspectFit"
            />
          </view>
          <text class="step-label">{{ step.label }}</text>
          <!-- 连接线（最后一个步骤不显示） -->
          <view 
            v-if="index < progressSteps.length - 1" 
            class="step-connector"
            :class="{ active: step.completed }"
          ></view>
        </view>
      </view>
      
      <!-- 投诉信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <view class="header-line"></view>
          <text class="card-title">投诉信息</text>
        </view>
        <view class="card-body">
          <view class="info-row">
            <text class="info-label">投诉编码</text>
            <text class="info-value">{{ complaintInfo.complaintOrderId }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">投诉人</text>
            <text class="info-value">{{ complaintInfo.custName }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">联系电话</text>
            <text class="info-value">{{ complaintInfo.contractPhoneNbr }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">业务号码</text>
            <text class="info-value">{{ complaintInfo.accNbr }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">业务类型</text>
            <text class="info-value">{{ complaintInfo.complaintMessage }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">受理渠道</text>
            <text class="info-value">{{ complaintInfo.channelNbr }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">受理时间</text>
            <text class="info-value">{{ complaintInfo.complaintDate }}</text>
          </view>
        </view>
      </view>
      
      <!-- 投诉进度详情卡片 -->
      <view class="detail-card">
        <view class="card-header">
          <view class="header-line"></view>
          <text class="card-title">投诉进度详情</text>
          <text class="status-text">状态: {{ currentStatus || '--' }}</text>
        </view>
        <view class="card-body">
          <!-- 进度时间线 -->
          <view v-if="progressDetails.length > 0" class="progress-timeline">
            <view 
              class="timeline-item" 
              v-for="(item, index) in progressDetails" 
              :key="index"
            >
              <view class="timeline-dot"></view>
              <view class="timeline-content">
                <view class="timeline-header">
                  <text class="timeline-title">{{ item.stage }}</text>
                  
                </view>
                <text class="timeline-desc">{{ item.time }}</text>
                <text class="timeline-desc">{{ item.description }}</text>
              </view>
            </view>
          </view>
          
          <!-- 空状态 -->
          <view v-else class="empty-progress">
            <text class="empty-text">暂无进度信息</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from '@/components/CustomNavbar.vue'

const navBarHeight = ref(80)
const orderCode = ref('')

// 进度步骤
const progressSteps = ref([
  { 
    label: '受理', 
    icon: '/static/icons/icon-complaint1.png',
    iconActive: '/static/icons/icon-complaint1-active.png',
    active: false, 
    completed: false 
  },
  { 
    label: '处理中', 
    icon: '/static/icons/icon-complaint2.png',
    iconActive: '/static/icons/icon-complaint2-active.png',
    active: false, 
    completed: false 
  },
  { 
    label: '回访', 
    icon: '/static/icons/icon-complaint3.png',
    iconActive: '/static/icons/icon-complaint3-active.png',
    active: false, 
    completed: false 
  },
  { 
    label: '归档', 
    icon: '/static/icons/icon-complaint4.png',
    iconActive: '/static/icons/icon-complaint4-active.png',
    active: false, 
    completed: false 
  }
])

// 投诉信息
const complaintInfo = ref({
  orderCode: 'TS0991251111587863',
  complainant: '杨***峰',
  contactPhone: '199****9544',
  businessNumber: '199****9544',
  businessType: '其他通用类',
  acceptChannel: '网上营业厅',
  acceptTime: '2025-11-11 10:13:40'
})

// 当前状态
const currentStatus = ref('归档')

// 进度详情
const progressDetails = ref([
  // {
  //   stage: '归档',
  //   time: '2025-11-11 10:46:59',
  //   description: 'XJ4001-工单归档|您的问题已处理完成,感谢您的关注与支持。'
  // },
  // {
  //   stage: '回访',
  //   time: '2025-11-11 10:46:59',
  //   description: 'XJ3001-最终处理结果中您的问题已处理,感谢您的支持!'
  // },
  // {
  //   stage: '处理中',
  //   time: '2025-11-11 10:46:59',
  //   description: 'XJ2003-再次处理中|我们非常重视您的问题,您的处理方案现已升级处理中,请耐心等候!'
  // },
  // {
  //   stage: '受理',
  //   time: '2025-11-11 10:13:40',
  //   description: '投诉已受理，正在处理中'
  // }
])

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
  
  // 初始化进度步骤状态
  updateProgressSteps()
})

onLoad((options) => {
  // 获取订单编码
  if (options && options.orderCode) {
    orderCode.value = options.orderCode
    complaintInfo.value.orderCode = options.orderCode
  }
  if (options && options.items) {
    complaintInfo.value = JSON.parse(decodeURIComponent(options.items))
    currentStatus.value = complaintInfo.value.zt || '--'

    // var complaintInfo.value.complaintStatusInfos.find(item => item.complaintStatus === 1001)
    // progressDetails
    complaintInfo.value.complaintStatusInfos.forEach(item => {
      if (item.complaintStatus === '1001') {
        progressDetails.value.push({
          stage: '受理',
          time: item.statusDate,
          description: item.complaintStatusDetail
        })
      }else if (item.complaintStatus === '1002') {
        progressDetails.value.push({
          stage: '处理中',
          time: item.statusDate,
          description: item.complaintStatusDetail
        })
        
      }else if (item.complaintStatus === '1003') {
        progressDetails.value.push({
          stage: '回访',
          time: item.statusDate,
          description: item.complaintStatusDetail
        })
      }else if (item.complaintStatus === '1004') {
        progressDetails.value.push({
          stage: '归档',
          time: item.statusDate,
          description: item.complaintStatusDetail
        })
      }
    })
  }
  
  // TODO: 根据订单编码加载投诉详情
  loadComplaintDetail()
})

// 加载投诉详情
const loadComplaintDetail = async () => {
  // TODO: 调用接口获取投诉详情
  // const res = await api.getComplaintDetail({ orderCode: orderCode.value })
  // if (res.code === 0) {
  //   complaintInfo.value = res.data.complaintInfo
  //   progressDetails.value = res.data.progressDetails
  //   currentStatus.value = res.data.status
  //   updateProgressSteps()
  // }
  
  // 模拟数据：根据状态更新进度步骤
  updateProgressSteps()
}

// 更新进度步骤状态
const updateProgressSteps = () => {
  const status = currentStatus.value
  
  if (status === '归档') {
    // 所有步骤都完成
    progressSteps.value.forEach(step => {
      step.completed = true
      step.active = false
    })
    progressSteps.value[3].active = true // 归档激活
  } else if (status === '回访') {
    progressSteps.value[0].completed = true
    progressSteps.value[1].completed = true
    progressSteps.value[2].active = true
    progressSteps.value[2].completed = false
  } else if (status === '处理中') {
    progressSteps.value[0].completed = true
    progressSteps.value[1].active = true
    progressSteps.value[1].completed = false
  } else if (status === '受理') {
    progressSteps.value[0].active = true
    progressSteps.value[0].completed = false
  } else {
    // 空状态，所有步骤都不激活
    progressSteps.value.forEach(step => {
      step.active = false
      step.completed = false
    })
  }
}
</script>

<style scoped>
.complaint-detail-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(40rpx);
  background: rgba(255, 255, 255, 0.8);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 32rpx;
  padding-bottom: 40rpx;
}

/* 进度跟踪器 */
.progress-tracker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 0rpx;
  margin-bottom: 32rpx;
  position: relative;
  /* background: rgba(255, 255, 255, 1); */
  border-radius: 16rpx;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
}

.step-icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  /* background: rgba(255, 255, 255, 1); */
  /* border: 2rpx solid rgba(204, 204, 204, 1); */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  transition: all 0.3s;
  padding: 8rpx;
  box-sizing: border-box;
}

.progress-step.active .step-icon-wrapper {
  border-color: rgba(78, 138, 254, 1);
  /* background: rgba(78, 138, 254, 0.1); */
}

.progress-step.completed .step-icon-wrapper {
  border-color: rgba(78, 138, 254, 1);
  /* background: rgba(255, 255, 255, 1); */
}

.step-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 连接线 */
.step-connector {
  position: absolute;
  top: 40rpx;
  left: calc(50% + 40rpx);
  right: calc(-50% + 40rpx);
  height: 2rpx;
  border-top: 2rpx dashed rgba(204, 204, 204, 1);
  z-index: 0;
  pointer-events: none;
}

.step-connector.active {
  border-top-color: rgba(78, 138, 254, 1);
}

.step-label {
  font-size: 24rpx;
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
}

.progress-step.active .step-label,
.progress-step.completed .step-label {
  color: rgba(78, 138, 254, 1);
  font-weight: 500;
}

/* 信息卡片 */
.info-card,
.detail-card {
  background: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.header-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  flex: 1;
}

.status-text {
  font-size: 28rpx;
  color: rgba(78, 138, 254, 1);
  font-weight: 400;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.info-label {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
  flex-shrink: 0;
  width: 160rpx;
}

.info-value {
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
  font-weight: 400;
  flex: 1;
  text-align: right;
  margin-left: 32rpx;
}

/* 进度时间线 */
.progress-timeline {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12rpx;
  top: 32rpx;
  width: 2rpx;
  height: calc(100% + 16rpx);
  background: rgba(204, 204, 204, 1);
}

.timeline-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: rgba(78, 138, 254, 1);
  flex-shrink: 0;
  margin-top: 4rpx;
}

.timeline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-title {
  font-size: 28rpx;
  color: rgba(78, 138, 254, 1);
  font-weight: 500;
}

.timeline-time {
  font-size: 24rpx;
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
}

.timeline-desc {
  font-size: 24rpx;
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
  line-height: 32rpx;
}

/* 空状态 */
.empty-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}
</style>

